<template>
	<div>
		<div class="base-container">
			<p class="title">基本信息</p>
			<el-descriptions class="descriptions" direction="vertical" :column="1">
				<el-descriptions-item label="申请文件记录号">{{ basicInfo.requestNum }}</el-descriptions-item>
				<el-descriptions-item label="证书失效日期">{{ basicInfo.caPubExpiry }}</el-descriptions-item>
				<el-descriptions-item label="发卡机构">
					<div class="key-box">
						<div>公钥</div>
						<div class="key-value">{{ basicInfo.asymmetricCardPubSecret }}</div>
						<div>私钥</div>
						<div class="key-value">{{ basicInfo.asymmetricCardPriSecret }}</div>
					</div>
				</el-descriptions-item>
				<el-descriptions-item label="支付账号">
					<div class="key-box">
						<div>用户公钥</div>
						<div class="key-value">{{ basicInfo.asymmetricPayPubSecret }}</div>
						<div>用户私钥</div>
						<div class="key-value">{{ basicInfo.asymmetricPayPriSecret }}</div>
					</div>
				</el-descriptions-item>
			</el-descriptions>
		</div>
	</div>
</template>

<script setup>
import { getCertificateManagementDetail } from '@/api/bus/certificateManagement'

const route = useRoute()

const flowId = computed(() => {
	return Number(route.params.id) || null
})

const basicInfo = ref({})

const pageInit = async () => {
	if (!flowId.value) return
	const res = await getCertificateManagementDetail(flowId.value)
	if (res.code == 200) {
		basicInfo.value = res.data
	}
}

pageInit()
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.title {
	color: rgb(31, 31, 31);
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dashed rgb(225, 225, 225);
}

.descriptions {
	:deep(.el-descriptions__content) {
		word-break: break-all;
	}
}

.key-box {
	box-sizing: border-box;
	border: 1px dashed rgb(43, 84, 239);
	border-radius: 4px;
	padding: 16px;
	color: rgb(31, 31, 31);
}

.key-value {
	color: var(--el-text-color-regular);
	margin-top: 10px;
	margin-bottom: 10px;
}
</style>
